<template>
    <view class="wrap">
        <view class="herder_nav">
            <view class="nav">
                <text :class="status == 0 ? 'act' : ''" @click="get_change(0)">全部</text>
                <text :class="status == 1 ? 'act' : ''" @click="get_change(1)">代付款</text>
                <text :class="status == 2 ? 'act' : ''" @click="get_change(2)">代发货</text>
                <text :class="status == 3 ? 'act' : ''" @click="get_change(3)">待收货</text>
                <text :class="status == 4 ? 'act' : ''" @click="get_change(4)">已完成</text>
            </view>
        </view>
        <scroll-view scroll-y class="scrooll_wrap">
            <view class="wrap_contner">
                <view class="order_contner" v-for="(item, index) in list" :key="index">
                    <view class="contner_top">
                        <text>订单号:{{ item.order_sn }}</text>
                        <text class="unpay">{{ item.cancel_text }}</text>
                    </view>
                    <view class="commodity" v-for="(item1, index1) in item.goods" :key="index1">
                        <view class="commodity_img">
                            <image :src="item1.img" mode="scaleToFill" />
                        </view>
                        <view class="commodity_contner">
                            <view class="commodity_name">
                                {{ item1.name }}
                            </view>
                            <view class="weight">{{ item1.attr }}</view>
                            <view class="price_count"><text class="price">￥{{ item1.price }}</text><text class="num">x{{
                                item1.num }}</text></view>
                        </view>
                    </view>
                    <view class="commdity_price_count">
                        <view class="price_counts"><text class="title">共1件商品实付款</text><text class="price">￥0.01</text>
                        </view>
                        <view class="operation">
                            <button class="btn_view_details">查看详情</button>
                            <button class="btn_del_bill">删除账单</button>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { get_order_getOrderList } from '../../api/order'
export default {
    data() {
        return {
            status: '',
            uid: uni.getStorageSync('uid'),
            list: []
        }
    },
    onLoad(options) {
        console.log(options)
        this.status = options.status
    },
    mounted() {
        let status = this.status
        this.get_change(status)
    },
    methods: {
        get_change(e) {
            this.status = e
            get_order_getOrderList({
                uid: this.uid,
                status: this.status,
                skip: 0,
                limit: 10,
            }, { token: uni.getStorageSync('token') }).then(res => {
                console.log(res)
                this.list = res.data
            })
        }
    }
}
</script>


<style lang="scss" scoped>
.wrap {
    width: 100%;


    .herder_nav {
        width: 100%;
        height: 40px;
        background-color: #fff;

        .nav {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #fff;
            position: fixed;
            top: 45;
            z-index: 999;

            text {
                position: relative;
                width: 20%;
                height: 40px;
                text-align: center;
                line-height: 40px;


            }

            .act {
                color: rgb(194, 23, 23);

                &::before {
                    content: '';
                    width: 64upx;
                    height: 8upx;
                    background: rgb(11, 158, 25);
                    border-radius: 80upx;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }
            }
        }
    }


    .scrooll_wrap {
        width: 100%;
        background-color: #fff;

        .wrap_contner {
            width: 90%;
            margin: 0 auto;

            .order_contner {
                width: 100%;
                padding-top: 30px;

                .contner_top {
                    width: 100%;
                    height: 40px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .unpay {
                        color: #fdd100;
                    }
                }

                .commodity {
                    width: 100%;
                    margin-top: 15px;
                    display: flex;
                    justify-content: space-between;

                    .commodity_img {
                        width: 30%;
                        height: 130px;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .commodity_contner {
                        width: 60%;
                        height: 130px;

                        .commodity_name {
                            font-size: 16px;
                            font-weight: 500;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                        }

                        .weight {
                            font-size: 14px;
                            color: #adaab8;
                            margin: 15px 0;

                        }

                        .price_count {
                            display: flex;
                            justify-content: space-between;

                            .price {
                                font-size: 14px;
                                color: #fdd100;
                            }

                            .num {
                                font-size: 14px;
                                color: #adaab8;
                            }
                        }
                    }
                }

                .commdity_price_count {
                    width: 100%;


                    .price_counts {
                        width: 100%;
                        height: 40px;
                        display: flex;
                        justify-content: right;
                        align-items: center;

                        .title {
                            display: inline-block;
                            font-size: 14px;
                            color: #adaab8;
                        }

                        .price {
                            display: inline-block;

                            font-size: 16px;
                            color: #fdd100;
                        }
                    }

                    .operation {
                        display: flex;
                        justify-content: right;

                        .btn_view_details {
                            width: 97px;
                            height: 30px;
                            background-color: #fff;
                            border-radius: 20px;
                            color: #000;
                            font-size: 16px;
                            border: 1px solid #adaab8;
                            text-align: center;
                            line-height: 30px;
                            margin: 0;
                        }

                        .btn_del_bill {
                            margin: 0;

                            background-color: #fdd100;
                            color: #fff;
                            @extend .btn_view_details
                        }
                    }
                }
            }




        }

    }
}
</style>